import React, { useState, useEffect } from 'react';
import { Modal, Button, Skeleton, Image, message, Upload, Row, Col } from 'antd'
import { UploadOutlined, LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { ProFormText, ProForm, ProFormDatePicker, ProFormDateTimePicker,ProFormSelect, ProFormTextArea, ProFormUploadButton } from '@ant-design/pro-components';
import type { UploadChangeParam } from 'antd/es/upload';
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
import { information } from '@/utils/rules';
import Utils from 'fr-util/utils';
import type { EditModalProps } from '../data';

import { reqAddUser, reqUpdateUser } from '@/services/user';

const EditModal: React.FC<EditModalProps> = ({ row, isOpen, activeKey, handleModal, actionRef }) => {
	const title = row?.id ? "修改" : "添加"
	const [formObj] = ProForm.useForm()
	const [initialValues, setinitialValues] = useState<any>(null)
	const handleAdd = async (params: any) => {
		const res = await reqAddUser({ type: activeKey, ...params })
		if (res.code == 200) { 
			message.success(res?.message)
			actionRef?.current.reload()
			handleModal(false)
		} else {
			message.error(res?.message)
		}
	}

	const handleEditor = async (params: any) => {
		const res = await reqUpdateUser({ type: activeKey, ...params, id: row?.id })
		if (res.code == 200) {
			message.success(res?.message)
			actionRef?.current.reload()
			handleModal(false)
		} else {
			message.error(res?.message)
		}
	}

	const toSelected = (data : any) =>{
		
		const selectData: { label: string; value: any; }[]=[];
		data?.map((item: any)=>{
			let label = '';
			for(const key in item) {
				if(key.toLowerCase().indexOf('name') >= 0 || key.toLowerCase().indexOf('title') >= 0){
					label = item[key];
					break;
				}
			}
			selectData.push({ "label":label,"value":item['id']})
		});
		return selectData;
	}

	useEffect(() => {
		if (row?.id) {
			let {id,username,password,roleid} = row

			setinitialValues({
				id,username,password,roleid
			})
		}
		setRoleidData([{value: 1,label: '管理员',},{value: 2,label: '广告发布员',},{value: 3,label: '广告审核员',},]);

	}, [])

	const [roleidData, setRoleidData] = useState<any>();

	const getBase64 = (img: RcFile, callback: (url: string) => void) => {
		const reader = new FileReader();
		reader.addEventListener('load', () => callback(reader.result as string));
		reader.readAsDataURL(img);
	}
	const beforeUpload = (file: RcFile) => {
		const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
		if (!isJpgOrPng) {
		message.error('You can only upload JPG/PNG file!');
		}
		const isLt2M = file.size / 1024 / 1024 < 2;
		if (!isLt2M) {
		message.error('Image must smaller than 2MB!');
		}
		return isJpgOrPng && isLt2M;
	}
	const [loading, setLoading] = useState(false);
	const [imageUrl, setImageUrl] = useState<string>();

	const uploadButton = (
		<div>
			{loading ? <LoadingOutlined /> : <PlusOutlined />}
			<div style={{ marginTop: 8 }}>上传</div>
		</div>
	);
	return (
		<Modal width={1000} title={title} open={isOpen} onCancel={() => handleModal(false)} footer={null} destroyOnClose={true}>
			{
				initialValues === null && row?.id ? <Skeleton active paragraph={{ rows: 6 }} /> :
				<ProForm
					form={formObj}
					initialValues={initialValues}
					onFinish={(values): Promise<any> => row?.id ? handleEditor(values) : handleAdd(values)}>
					<Row gutter={25}>
						<Col span={0}><ProFormText name="id" label="编号" hidden placeholder="请输入编号" /></Col>
						<Col span={8}><ProFormText name="username" label="用户名" placeholder="请输入用户名" /></Col>
						<Col span={8}><ProFormText name="password" label="密码" placeholder="请输入密码" /></Col>
						<Col span={8}><ProFormSelect options={roleidData} name="roleid" width="md" label="角色:" /></Col>
					</Row>
				</ProForm>
			}
		</Modal >
	);
};
export { EditModal }

